<template>
  <div id="operate_indent">
    <div id="system_admin">
      <!--顶部搜索框内容开始-->
      <div class="role_seek">
        <el-input
          class="role_input"
          placeholder="请输入订单编号"
          v-model="forms.orderNo"
          clearable
          @change="seek"
        ></el-input>
        <el-select
          v-model="forms.status"
          clearable
          placeholder="请选择订单状态"
        >
          <el-option
            v-for="item in status"
            :key="item.staData"
            :label="item.staName"
            :value="item.staData"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="seek"
          v-power="'operation:order:list'"
          >查找</el-button
        >
        <br /><el-date-picker
          v-model="forms.gmtStart"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker
        >至
        <el-date-picker
          v-model="forms.gmtEnd"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
        <el-select v-model="forms.warehouse" placeholder="待出库" clearable>
          <el-option
            v-for="item in status"
            :key="item.staData"
            :label="item.staName"
            :value="item.staData"
          ></el-option>
        </el-select>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-download"
          @click="exporInterface"
          >导出</el-button
        >
        <!--发货添加弹出框开始-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            class="pop-up"
            status-icon
          >
            <el-form-item label="快递公司" :label-width="formLabelWidth" prop="shipCode">
              <el-select v-model="form.shipCode">
                <el-option
                  v-for="item in shipCode"
                  :key="item.key"
                  :label="item.shiName"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="快递编号"
              :label-width="formLabelWidth"
              prop="shipNo"
            >
              <el-input v-model="form.shipNo" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="deliver('form')">确 定</el-button>
          </div>
        </el-dialog>
        <!--修改添加弹出框结束-->
        <!--详情弹出框-->
        <el-dialog :visible.sync="particularsVisible" title="订单详情">
          <el-form
            label-position="left"
            :rules="rules"
            ref="form"
            class="pop-up"
            status-icon
          >
            <el-form-item label="订单编号" :label-width="formLabelWidth">
              <span v-text="particularsData.orderNo"></span>
            </el-form-item>
            <el-form-item label="用户ID" :label-width="formLabelWidth">
              <span v-text="particularsData.userId"></span>
            </el-form-item>
            <el-form-item label="订单渠道" :label-width="formLabelWidth">
              <span v-text="particularsData.channel"></span>
            </el-form-item>
            <el-form-item label="订单状态" :label-width="formLabelWidth">
              <el-tag>{{ particularsData.status | statusFilter }}</el-tag>
            </el-form-item>
            <el-form-item label="支付渠道" :label-width="formLabelWidth">
              <el-tag>{{
                particularsData.payChannel | payChannelFilter
              }}</el-tag>
            </el-form-item>
            <el-form-item label="用户留言" :label-width="formLabelWidth">
            </el-form-item>
            <el-form-item label="客服备注" :label-width="formLabelWidth">
              <span v-text="particularsData.adminMono"></span>
              <el-button
                type="primary"
                @click="innerRefund"
                class="el-icon-edit"
                >编辑</el-button
              >
            </el-form-item>
            <el-form-item label="配送费用" :label-width="formLabelWidth">
            </el-form-item>
            <el-form-item label="收货信息" :label-width="formLabelWidth">
              <span
                >(收货人) {{ particularsData.consignee }} (手机号)
                {{ particularsData.phone }} (地址) {{ particularsData.province
                }}{{ particularsData.city }}{{ particularsData.county
                }}{{ particularsData.address }}</span
              >
            </el-form-item>
            <el-form-item label="商品信息" :label-width="formLabelWidth">
            </el-form-item>
            <el-table :data="skuList" border="border" style="width: 100%">
                <el-table-column
                  prop="spuTitle"
                  label="名称"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="规格"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="num" label="商品数量" align="center">
                </el-table-column>

                <el-table-column align='center' property="unit" label="单位"></el-table-column>
            <el-table-column align='center' property="price" label="总价(单价*数量)" >
              <template slot-scope="scope">
                {{(scope.row.price * scope.row.num) / 100}}
              </template>
            </el-table-column>
              </el-table>
          </el-form>
        </el-dialog>
        <!--详情添加弹出框结束-->
        <!--详情二级编辑弹框开始-->
        <el-dialog
          width="30%"
          :title="title"
          :visible.sync="innerVisible"
          append-to-body
        >
          <el-form
            label-position="left"
            :model="form"
            class="pop-up refund"
            status-icon
          >
            <el-form-item label="等级" :label-width="formLabelWidth">
              <el-radio v-model="form.adminMonoLevel" :label="0">无色</el-radio>
              <el-radio v-model="form.adminMonoLevel" :label="1">绿色</el-radio>
              <el-radio v-model="form.adminMonoLevel" :label="2">橙黄</el-radio>
              <el-radio v-model="form.adminMonoLevel" :label="3">红色</el-radio>
            </el-form-item>
            <el-form-item label="内容" :label-width="formLabelWidth">
              <el-input v-model="form.adminMono" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerredact">确 定</el-button>
          </div>
        </el-dialog>
        <!--详情二级弹框结束-->

        <!--退款-->
        <el-dialog :visible.sync="refundVisible" :title="title">
          <el-form
            label-position="left"
            :model="form"
            class="pop-up refund"
            status-icon
          >
            <el-form-item label="tips" :label-width="formLabelWidth">
              <span v-text="tips"></span>
            </el-form-item>
            <el-form-item label="操作" :label-width="formLabelWidth">
              <el-radio v-model="form.type" :label="0">拒绝退款</el-radio>
              <el-radio v-model="form.type" :label="1">允许退款</el-radio>
            </el-form-item>
            <el-form-item
              v-if="form.type == 1"
              label="金额"
              :label-width="formLabelWidth"
              prop="skuTotalPrice"
            >
              <el-input
                autocomplete="off"
                v-model.number="form.skuTotalPrice"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="refundVisible = false">取 消</el-button>
            <el-button type="primary" @click="refund">确 定</el-button>
          </div>
        </el-dialog>
        <!--退款-->
      </div>
      <!--顶部搜索框内容结束-->

      <!--底部列表内容部分-->
      <template>
        <el-table
          border
          :data="tableData"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :cell-class-name="chooseColour"
        >
          <el-table-column sortable align="center" type="expand">
            <template slot-scope="scope">
              <el-form
                label-position="left"
                ref="form"
                class="pop-up"
                status-icon
                :data="tableData"
              >
                <el-form-item label="联系人" :label-width="formLabelWidth">
                  <span v-text="scope.row.consignee"></span>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                  <span v-text="scope.row.phone"></span>
                </el-form-item>
                <el-form-item label="客服备注" :label-width="formLabelWidth">
                  <span>{{ scope.row.adminMono | adminmonoFilter }}</span>
                </el-form-item>
                <el-form-item
                  label="退款原因"
                  :label-width="formLabelWidth"
                  v-if="scope.row.status == 60"
                >
                  <span>{{ scope.row.refundReason | refundReasonFilter }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderNo"
            label="订单编号"
            align="center"
            width="180px"
          ></el-table-column>
          <el-table-column
            prop="userId"
            label="用户ID"
            align="center"
          ></el-table-column>
          <el-table-column label="订单状态" align="center" width="120px">
            <template slot-scope="scope"
              ><el-tag>{{ scope.row.status | statusFilter }}</el-tag></template
            >
          </el-table-column>
          <el-table-column label="支付渠道" align="center" width="120px">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.payChannel | payChannelFilter }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" align="center" width="120px">
            <template slot-scope="scope"
              >¥{{ scope.row.skuTotalPrice / 100 }}</template
            >
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="140px">
            <template slot-scope="scope">{{
              scope.row.gmtCreate | filterTime
            }}</template>
          </el-table-column>
          <el-table-column label="物流渠道" align="center" width="140px">
            <template slot-scope="scope"
              ><el-tag>{{
                scope.row.shipCode | shipcodeFilter
              }}</el-tag></template
            >
          </el-table-column>
          <el-table-column label="物流单号" align="center" width="200px">
            <template slot-scope="scope">{{ scope.row.shipNo }}</template>
          </el-table-column>
          <el-table-column label="备注" align="center" width="200px">
            <template slot-scope="scope">{{ scope.row.mono }}</template>
          </el-table-column>

          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="300px"
          >
            <template slot-scope="scope">
              <el-button
                class="button_redact"
                size="mini"
                @click="particulars(scope.row)"
                v-power="'operation:order:detail'"
                >详情</el-button
              >
              <el-button
                class="button_redact"
                size="mini"
                v-if="scope.row.status == 60"
                @click="refundButton(scope.row)"
                v-power="'operation:order:refund'"
                >退款</el-button
              >
              <el-button
                class="button_redact"
                size="mini"
                v-if="scope.row.status == 20"
                @click="detail(scope.row)"
                >配送单</el-button
              >
              <el-button
                class="button_redact"
                size="mini"
                v-if="scope.row.status == 20"
                @click="handleEdit(scope.row)"
                v-power="'operation:order:ship'"
                >发货</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--底部列表内容部分结束-->

      <!--底部分页开始-->
      <div class="block">
        <Paging :forms="forms" :gain="gain"></Paging>
      </div>
      <!--底部分页结束-->
    </div>
  </div>
</template>

<script>
import Indent from "@/api/operate/Indent";
import Paging from "../../components/Paging.vue"; //自定义组件

export default {
  data() {
    return {
      //弹出框
      tableData: [{}], //table里面的数据
      particularsData: [], //详情内容
      skuList: [], //详情内容里的表格
      listData: [],
      dialogFormVisible: false, //发货弹出框
      particularsVisible: false, //详情弹出框
      innerVisible: false, //详情里的添加弹出框
      refundVisible: false, //退款弹出框
      formLabelWidth: "70px", //弹出框宽度
      title: "创建", //弹出框标题
      bool: false, //判断是导出还是配送单
      tips: "允许退款后钱会退回对方账户，请确认您已经收到退货", //退款框提示
      // disabled:true,
      shipCode: [
        { shiName: "无需物流公司", key: "无需物流公司" },
        { shiName: "顺丰速运", key: "顺丰速运" },
        { shiName: "百世快递", key: "百世快递" },
        { shiName: "中通快递", key: "中通快递" },
        { shiName: "申通快递", key: "申通快递" },
        { shiName: "圆通速递", key: "圆通速递" },
        { shiName: "韵达速递", key: "韵达速递" },
        { shiName: "邮政快递包裹", key: "邮政快递包裹" },
        { shiName: "EMS", key: "EMS" },
        { shiName: "天天快递", key: "天天快递" },
        { shiName: "京东快递", key: "京东快递" },
        { shiName: "优速快递", key: "优速快递" },
        { shiName: "德邦快递", key: "德邦快递" },
        { shiName: "宅急送", key: "宅急送" },
        { shiName: "TNT快递", key: "TNT快递" }
      ],
      status: [
        { staData: 10, staName: "未付款" },
        { staData: 12, staName: "正在拼团" },
        { staData: 20, staName: "待出库" },
        { staData: 30, staName: "待收货" },
        { staData: 40, staName: "待评价" },
        { staData: 50, staName: "已完成" },
        { staData: 60, staName: "退款中" },
        { staData: 70, staName: "已退款" },
        { staData: 80, staName: "已取消" },
        { staData: 90, staName: "已取消(系统)" }
      ],
      //分页
      forms: {
        limit: 20, //limit
        total: 0, //分页——-共几条ds
        pageNo: 1, //页码
        status: "", //订单状态
        orderNo: "", //订单编号
        gmtStart: "",//开始时间
        gmtEnd: "",//结束时间
        warehouse: "" //待出库
      },
      //输入框数值
      form: {
        orderId: "", //订单ID
        orderNo: "", //订单号
        shipCode: "无需物流公司", //承运商Code
        shipNo: "", //运单号
        type: 0, //退款默认值
        adminMonoLevel: "", //颜色默认值
        adminMono: "", //备注内容
        skuTotalPrice: ""
      },

      //弹出框验证
      rules: {
        shipCode: [
          { required: true, trigger: 'blur' }
        ],
        shipNo: [
          { message: "快递编号不能为空", trigger: "change", required: true },
          { pattern: /^[0-9]{13}$/, message: "请输入正确快递编号格式" }
        ]
      }
    };
  },
  components: {
    Paging
  },
  created() {
    this.gain();
  },
  filters: {
    //状态
    statusFilter(data) {
      if (data == 40) {
        return "待评价";
      }else if (data == 12) {
        return "正在拼团"
      } else if (data == 80) {
        return "已取消";
      } else if (data == 70) {
        return "已退款";
      } else if (data == 30) {
        return "待收货";
      } else if (data == 90) {
        return "已取消(系统)";
      } else if (data == 60) {
        return "退款中";
      } else if (data == 50) {
        return "已完成";
      } else if (data == 20) {
        return "待出库";
      }
    },
    payChannelFilter(data) {
      if (data == "WX") {
        return "微信支付";
      } else if (data == "OFFLINE") {
        return "线下支付";
      } else if (data == null) {
        return "未支付";
      }
    },
    //客服备注
    adminmonoFilter(data) {
      if (data == null) {
        return "无";
      } else {
        return data;
      }
    },
    //退款原因
    refundReasonFilter(data) {
      if (data == null) {
        return "未填写退款原因";
      } else {
        return data;
      }
    },
    //物流渠道
    shipcodeFilter(data) {
      if (data == null) {
        return "未发货";
      }else if (data === 'SF') {
        return '顺丰速运'
      } else if (data === 'ZTO') {
        return '中通快递'
      } else if (data === 'HTKY') {
        return '百世快递'
      } else if (data === 'YZPY') {
        return '邮政快递包裹'
      } else if (data === 'TNT') {
        return 'TNT快递'
      } else if (data === 'ZJS') {
        return '宅急送'
      } else if (data === 'UC') {
        return '圆通快递'
      } else if (data === 'JD') {
        return '京东快递'
      } else if (data === 'DBL') {
        return '德邦快递'
      } else if (data === 'HHTT') {
        return '天天快递'
      } else if (data === 'EMS') {
        return 'EMS'
      } else if (data === 'YD') {
        return '韵达快递'
      } 
      else if(data==1){
        return '';
      }else{
return data
      }
    }
  },
  methods: {
    //获取列表数据内容
    gain() {
      var _this = this;
      Indent.gain(_this.forms).then(res => {
        _this.tableData = res.data.data.items; //将接口列表内容赋值给列表数组
        _this.forms.total = res.data.data.total; //分页————条数
        _this.forms.limit = res.data.data.pageSize; //页码长度
        _this.forms.pageNo = res.data.data.pageNo; //页码
      });
    },
    //详情弹出框页面
    particulars(row) {
      this.form = { ...row };
      this.form.orderId = row.id; //订单号
      this.particularsVisible = true; //显示详情框
      this.particularsPort(); //调用详情接口
    },
    //详情接口
    particularsPort() {
      Indent.particulars(this.form).then(res => {
        this.particularsData = res.data.data;
        this.skuList = res.data.data.skuList; //详情里的表格
      });
    },
    //详情弹出框编辑页面
    innerRefund() {
      this.innerVisible = true;
      this.title = "发货"; //将标题改变
    },
    //详情弹出框编辑接口
    innerredact() {
      Indent.innerredact(this.form).then(res => {
        if (res.data.errmsg == "成功") {
          this.particularsPort();
          this.gain();
          this.Prosperity.Messages("客服备注成功！", "success");
          this.innerVisible = false;
        } else {
          this.Prosperity.Messages(res.data.errmsg, "error");
        }
      });
    },
    //详情弹出框编辑改变样式
    chooseColour({ row, column, rowIndex, columnIndex }) {
      if (row.adminMonoLevel == 0 && columnIndex === 1) {
        console.log(column, rowIndex);
        return "";
      }
      if (row.adminMonoLevel == 1 && columnIndex === 1) {
        return "green";
      }
      if (row.adminMonoLevel == 2 && columnIndex === 1) {
        return "orange";
      }
      if (row.adminMonoLevel == 3 && columnIndex === 1) {
        return "red";
      }
    },

    //点击退款按钮触发
    refundButton(row) {
      for (const key in this.form) {
        this.form[key] = row[key];
      }
      this.form.skuTotalPrice = row.skuTotalPrice / 100;
      this.title = "退款"; //将标题改变
      this.refundVisible = true; //显示弹出框
    },

    //退款接口
    refund() {
      var _this = this;
      Indent.refund(_this.form)
        .then(res => {
          if (res.data.errmsg == "成功") {
            this.gain();
            this.Prosperity.Messages("退款成功", "success");
            this.refundVisible = false;
          } else {
            _this.Prosperity.Messages(res.data.errmsg, "error");
          }
        })
        .catch(err => {
          return err;
        });
    },
    //点击发货按钮触发
    handleEdit(row) {
      //清空输入框下面的提示（输入错误）
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.form.shipCode='无需物流公司'
      this.form.orderNo = row.orderNo;
      this.title = "发货"; //改变弹出框标题
      this.dialogFormVisible = true; //显示弹出框
    },
    //发货接口
    deliver(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          var _this = this;
          Indent.deliver(_this.form).then(res => {
            if (res.data.errmsg == "成功") {
              this.gain();
              _this.Prosperity.Messages("发货成功", "success");
              _this.dialogFormVisible = false; //关闭弹出框
            } else {
              _this.Prosperity.Messages(res.data.errmsg, "error");
            }
          });
        } else {
          return false;
        }
      });
    },
    //搜索信息
    seek() {
      this.forms.pageNo = 1; //在最后一页搜索时回到第一页
      this.gain();
    },
    //导出按钮
    exporInterface() {
      this.bool = true;
      this.exper();
    },
    //导出接口
    exporPort() {
      Indent.exporInterface(this.forms).then(res => {
        var list = res.data.data;
        if (list) {
          list.map(item => {
            this.listData.push({
              orderNo: item.orderNo, //订单编号
              spuTitle: item.skuList[0].spuTitle, //商品名称
              title: item.skuList[0].title, //规格
              unit: item.skuList[0].unit, //规格
              num: item.skuList[0].num, //配送数量
              address: item.province + item.city + item.county + item.address, //配送地址
              consignee: item.consignee, //收货人
              phone: item.phone, //联系方式
              regionalism: item.province + item.city + item.county, //区域划分
              mono: item.mono //客服备注
            });
          });
          const { export_json_to_excel } = require("@/util/Export2Excel");
          const tHeader = [
            "订单编号",
            "商品名称",
            "规格",
            "单位",
            "配送数量",
            "配送地址",
            "收货人",
            "联系方式",
            "区域划分",
            "客服备注",
            "用户备注"
          ];
          const filterVal = [
            "orderNo",
            "spuTitle",
            "title", //规格
            "unit", //单位
            "num", //配送数量
            "address", //配送地址
            "consignee", //收货人
            "phone", //联系方式
            "regionalism", //区域划分
            "adminMono", //客服备注
            "mono" //用户备注
          ];
          const listData = this.listData;
          const data = this.formatJson(filterVal, listData);
          export_json_to_excel(tHeader, data, "订单信息");
        } else {
          this.Prosperity.Messages(
            "请选择导出对象！(请勿选择没有的时间)",
            "error"
          );
        }
      });
    },
    //配送单按钮
    detail(row) {
      this.form.orderId = row.id;
      this.bool = false;
      this.exper();
    },
    //配送单接口
    distributionPort() {
      Indent.particulars(this.form).then(res => {
        if (res.data.errno == 200) {
          const list = res.data.data;
          const orderNo = list.skuList[0].orderNo; // 订单编号
          const spuTitle = list.skuList[0].spuTitle; // 商品名称
          const title = list.skuList[0].title; // 规格
          const unit = list.skuList[0].unit; // 单位
          const num = list.skuList[0].num; // 配送数量
          const addressList = list.city + list.city + list.city; // 配送地址
          const consignee = list.consignee; // 收货人
          const phone = list.skuList[0].phone; // 联系方式
          const address = list.city + list.city; // 区域划分
          const adminMono = list.adminMono; // 客服备注
          const mono = list.mono; // 用户备注
          this.listData = [{orderNo: orderNo, spuTitle: spuTitle, title: title, unit: unit,
            num: num, addressList: addressList, consignee: consignee, phone: phone, address: address, adminMono: adminMono, mono: mono }]
          const { export_json_to_excel } = require("@/util/Export2Excel");
          const tHeader = [
            "订单编号",
            "商品名称",
            "规格",
            "单位",
            "配送数量",
            "配送地址",
            "收货人",
            "联系方式",
            "区域划分",
            "客服备注",
            "用户备注"
          ];
          const filterVal = [
            "orderNo",
            "spuTitle",
            "title", //规格
            "unit", //单位
            "num", //配送数量
            "addressList", //配送地址
            "consignee", //收货人
            "phone", //联系方式
            "address", //区域划分
            "adminMono", //客服备注
            "mono" //用户备注
          ];
          const listData = this.listData;
          const data = this.formatJson(filterVal, listData);
          export_json_to_excel(tHeader, data, "订单信息");
        } else {
          this.Prosperity.Messages(res.data.errmsg, "error");
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    //导出Ex表格
    exper() {
      require.ensure([], () => {
        if (this.form.gmtEnd !== "" || this.form.gmtStart !== "") {//判断是否有时间
          this.form.gmtStart = new Date(this.form.gmtStart).getTime();
          this.form.gmtEnd = new Date(this.form.gmtEnd).getTime();
        }
        if (this.bool) {
          this.exporPort();
        } else {
          this.distributionPort();
        }
      });
    }
  }
};
</script>

<style scoped="scoped" lang="less">
/*最大父盒子开始*/
#system_admin {
  padding: 20px;
}
/*最大父盒子结束*/

/*顶部index框开始*/
.role_input {
  margin-right: 5px;
}
.role_seek > .el-input {
  width: 200px !important;
  height: 40px !important;
}
.role_seek > .el-input > .el-input__inner {
  font-size: inherit;
  width: 50% !important;
  height: 100% !important;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.role_input .el-input__suffix {
  left: 170px !important;
}
.el-date-editor {
  margin-right: 5px;
  margin-top: 10px;
}
/*顶部index框结束*/

/*顶部按钮开始*/
.role_seek > .el-button--primary {
  line-height: 1px;
  font-size: 14px;
  border: 1px solid #409eff !important;
  background: #409eff !important;
  color: #fff;
  vertical-align: middle;
  padding: 12px 20px;
  margin-left: 5px;
}
/*顶部按钮结束*/

/*底部列表内容*/
.el-table {
  margin-top: 23px;
  font-size: 12px;
}
.cell {
  text-align: center;
  font-size: 12px;
  padding: 0px 10px;
}
.el-table__row > td {
  padding: 8px 0px;
}
.button_redact {
  background: #409eff !important;
  color: #fff !important;
  border: 1px solid #409eff;
}
/*编辑内容按钮*/
.button_redact:hover {
  background: #66b1ff !important;
  border: 1px solid #66b1ff;
}
.button_remove {
  background: #f56c6c !important;
  color: #fff !important;
  border: #f56c6c 1px solid;
}
.button_remove:hover {
  background: #f78989 !important;
  border: 1px solid #f78989;
}
.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}
/*底部列表内容*/

/*底部分页*/
.block {
  margin: 55px 0px;
}

/*底部分页结束*/

/*弹出框*/
.el-form {
  margin-left: 5px;
}
.el-form-item__label {
  text-align: left;
  margin-left: 50px;
  width: 85px !important;
}
.el-input__inner {
  text-indent: 5px;
}
.pop-up
  > .el-form-item
  > .el-form-item__content
  > .el-input
  > .el-input__inner {
  width: 268px !important;
  height: 38px;
  padding: 15px 0px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
.el-dialog__body {
  margin-left: 40px;
}
.pop-up > .el-form-item > .el-form-item__content > .el-form-item__error {
  left: 0px !important;
}
.el-input {
  width: 27%;
}
.refund {
  margin-left: 40px;
}
/*弹出框结束*/
.el-select .el-input__inner {
  border: 1px solid #dcdfe6;
}
.el-select__caret {
  position: absolute;
  right: 58px !important;
}
.rolelds .el-input__suffix > i {
  position: absolute;
  right: 24px;
}
/*颜色样式*/
/deep/ .el-table .green {
  background: #3cb371;
}
/deep/ .el-table .orange {
  background: #ffa500;
}
/deep/ .el-table .red {
  background: #cd5c5c;
}
</style>
